<div nz-row [nzGutter]="8">
  <div nz-col class="gutter-row" [nzSpan]="8" [nzOffset]="8">
    <div class="gutter-box" class="m-login">

      <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="_submitForm()">
        <div nz-form-item>
          <div nz-form-control [nzValidateStatus]="validateForm.controls.userName">
            <nz-input formControlName="userName" [nzPlaceHolder]="'Username'" [nzSize]="'large'">
              <ng-template #prefix>
                <i class="anticon anticon-user"></i>
              </ng-template>
            </nz-input>
            <div nz-form-explain *ngIf="validateForm.controls.userName.dirty&&validateForm.controls.userName.hasError('required')">Please input your username!</div>
          </div>
        </div>
        <div nz-form-item>
          <div nz-form-control [nzValidateStatus]="validateForm.controls.password">
            <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'Password'" [nzSize]="'large'">
              <ng-template #prefix>
                <i class="anticon anticon-lock"></i>
              </ng-template>
            </nz-input>
            <div nz-form-explain *ngIf="validateForm.controls.password.dirty&&validateForm.controls.password.hasError('required')">Please input your Password!</div>
          </div>
        </div>
        <div nz-form-item>
          <div nz-form-control>
            <label nz-checkbox formControlName="remember">
              <span>Remember me</span>
            </label>
            <a class="login-form-forgot" class="login-form-forgot">Forgot password</a>
            <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'" routerLink="/main">Log in</button>            Or
            <a href="javascript:;">register now!</a>
          </div>
        </div>
      </form>

    </div>
  </div>
</div>